<script setup>
import { onMounted, ref } from "vue";
import { getDetailListAPI } from "@/apis/detail.js";
import { useRoute } from "vue-router";
import DetailHot from "./components/DetailHot.vue";
import { useCartStore } from "@/stores/cart";
import { ElMessage } from "element-plus";
const cartStore = useCartStore();
const route = useRoute();
const detailList = ref({});

const count = ref(1);
const getDetailList = async () => {
  const res = await getDetailListAPI(route.params.id);
  detailList.value = res.result;
};
let skuObj = {};
const skuChange = (sku) => {
  skuObj = sku;
};
onMounted(() => getDetailList());
const handleChange = () => {
};
const handleAddGood = () => {
  console.log(skuObj)
  if (skuObj.skuId) {
    cartStore.addCart({
      id: detailList.value.id,
      name: detailList.value.name,
      picture: detailList.value.mainPictures[0],
      price: detailList.value.price,
      count: count.value,
      skuId: skuObj.skuId,
      attrsText: skuObj.specsText,
      selected: true
    });
    ElMessage.success("商品添加成功")
  }else ElMessage.warning("请选择商品规格！")
};
</script>

<template>
  <div
    class="detailContainer"
    style="width: 100%; display: flex; justify-content: center; flex-wrap: wrap"
  >
    <div class="detailMain" style="width: 1240px" v-if="detailList.details">
      <div class="topCategory" style="width: 100%; height: 40px">
        <div
          class="breadContainer"
          style="height: 100%; display: flex; align-items: center"
        >
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{ path: `/category/${detailList.categories[1].id}` }"
              >{{ detailList.categories[1].name }}
            </el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{ path: `/category/sub/${detailList.categories[0].id}` }"
              >{{ detailList.categories[0].name }}
            </el-breadcrumb-item>
            <el-breadcrumb-item
              >抓绒保暖，毛毛虫子儿童运动鞋
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div
        class="detailMainContainer"
        style="
          width: 100%;
          background-color: white;
          padding: 10px 10px 10px 10px;
          display: flex;
        "
      >
        <div class="detailMainContainer-left" style="width: 50%">
          <div
            class="imgDisplay"
            style="
              width: 100%;
              height: 440px;
              display: flex;
              justify-content: center;
            "
          >
            <XtxImageView :image-list="detailList.mainPictures"></XtxImageView>
          </div>

          <div
            class="goodMessage"
            style="width: 100%; display: flex; justify-content: center"
          >
            <div class="goodMessageItem">
              <div class="textContainer">销量人气</div>
              <div class="numContainer">{{ detailList.salesCount }}+</div>
              <div class="decContainer">销量人气</div>
            </div>
            <div class="goodMessageItem">
              <div class="textContainer">商品评价</div>
              <div class="numContainer">{{ detailList.commentCount }}+</div>
              <div class="decContainer">查看评价</div>
            </div>
            <div class="goodMessageItem">
              <div class="textContainer">收藏人气</div>
              <div class="numContainer">{{ detailList.collectCount }}+</div>
              <div class="decContainer">收藏商品</div>
            </div>
            <div class="goodMessageItem">
              <div class="textContainer">品牌信息</div>
              <div class="numContainer">传智自有</div>
              <div class="decContainer">品牌主页</div>
            </div>
          </div>
        </div>
        <div class="detailMainContainer-right" style="width: 50%">
          <div
            class="title"
            style="
              font-weight: 700;
              font-size: 17px;
              height: 30px;
              display: flex;
              align-items: center;
            "
          >
            {{ detailList.name }}
          </div>
          <div
            class="dec"
            style="height: 30px; display: flex; align-items: center"
          >
            {{ detailList.desc }}
          </div>
          <div
            class="price"
            style="
              display: flex;
              height: 30px;
              display: flex;
              align-items: center;
              margin-bottom: 5px;
            "
          >
            <div style="color: red; margin-right: 10px; font-size: 18px">
              ￥{{ detailList.price }}
            </div>
            <div style="text-decoration: line-through; color: #999">
              {{ detailList.oldPrice }}
            </div>
          </div>
          <div
            style="
              width: 100%;
              padding: 10px 10px 10px 10px;
              background-color: #e9f6ee;
              margin-bottom: 10xp;
            "
          >
            <div style="display: flex; height: 40px">
              <div style="color: #d3d0cc; margin-right: 20px">促销</div>
              <div>12月好物放送，App领券购买直降120元</div>
            </div>
            <div style="display: flex; height: 40px">
              <div style="color: #d3d0cc; margin-right: 20px">服务</div>
              <div>
                &nbsp;无忧退货&nbsp;&nbsp;快速退款&nbsp;&nbsp;免费包邮&nbsp;&nbsp;了解详情
              </div>
            </div>
          </div>
          <div>
            <XtxSku :goods="detailList" @change="skuChange"></XtxSku>
          </div>
          <div>
            <el-input-number v-model="count" :min="1" @change="handleChange" />
          </div>
          <div style="width: 100%; margin-top: 15px">
            <el-button @click="handleAddGood()" style="height: 40px"
              >加入购物车</el-button
            >
          </div>
        </div>
      </div>
      <div
        class="detailImgContainer"
        style="
          width: 100%;
          margin-top: 10px;

          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        "
      >
        <div
          style="
            width: 100%;
            background-color: white;
            padding: 20px 10px 20px 30px;
          "
        >
          <div style="width: 100%; display: flex; align-items: center">
            商品详情
          </div>
          <el-divider />
          <div style="width: 100%; display: flex; flex-wrap: wrap">
            <div
              style="
                width: 50%;
                display: flex;
                align-items: center;
                height: 40px;
              "
              v-for="item in detailList.details.properties"
              :key="item.value"
            >
              <span>{{ item.name }}</span
              ><span style="margin-left: 50px">{{ item.value }}</span>
            </div>
          </div>
        </div>

        <div style="width: 78%; display: flex; flex-wrap: wrap">
          <img
            style="width: 100%; margin-bottom: 30px"
            v-for="img in detailList.details.pictures"
            :key="img"
            :src="img"
            alt=""
          />
        </div>
        <!-- 热榜 -->
        <div
          style="
            width: 20%;
            margin-left: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background-color: white;
            padding: 0 10px 0 10px;
            margin-top: 30px;
          "
        >
          <DetailHot :hot-type="1"></DetailHot>
          <DetailHot :hot-type="2"></DetailHot>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.goodMessageItem {
  width: 20%;
  height: 80px;
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.goodMessageItem:last-child {
  border-right: 0;
}
.textContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.numContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: red;
}
.decContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>